<template>
    <van-sticky :offset-top="0">
        <div>
            <van-nav-bar title="我的积分券" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
    </van-sticky>


    <van-swipe-cell v-for="(item, index) in coupon.list">
        <van-card :num="item.number" :price="item.integral" :title="item.name" :thumb=item.src currency="积分：">
            <template #tags>
                <span class="date">使用日期：{{ item.date }}</span>
            </template>
        </van-card>
        <template #right>
            <van-button square text="使用" type="danger" class="revise-button" @click="showCoupon" />
        </template>

    </van-swipe-cell>
    <van-popup v-model:show="show" closeable close-icon="close">
        <img src="https://img2.baidu.com/it/u=2234664417,2373975971&fm=253&fmt=auto&app=138&f=JPEG?w=361&h=112" alt="">
    </van-popup>
</template>



<script lang="ts" setup>
import { useCoupon } from '../../store/Coupon'
import { ref } from 'vue';

const coupon = useCoupon()

// 弹出层
const show = ref(false);
const showCoupon = () => {
    show.value = true;
    return {
        show, showCoupon
    }
};

const onClickLeft = () => history.back();
console.log(coupon.list);




</script>

<style lang="scss" scoped>
.revise-button {
    height: 100%;
}

.date {
    font-size: 3rem;
}
</style>